<template>
  <view class="myCamper">
    <view class="head-box">请选择出行人员证件信息，用于购买保险并订做营期用品。</view>
    <view class="container-box auto-box">
      <scroll-view scroll-y="true" style="height: 100%">
        <view v-if="dataList.length">
          <view
            :class="[
              'white-bg item-box flex-box',
              index < dataList.length ? 'space-vertical-box' : '',
            ]"
            v-for="(item, index) in dataList"
            @tap.stop="handleSelect(item)"
            :key="index"
          >
            <view :class="['select-box', item.isSelect ? 'select-active' : '']">
              <uv-icon v-if="item.isSelect" name="checkbox-mark" color="#fff" size="14"></uv-icon
            ></view>
            <view class="auto-box">
              <view>
                <text class="name">{{ item.userName }}</text>
                <text>营员</text>
              </view>
              <view class="space-top">
                <text>{{ item.genderText }}</text>
                <text class="space-box">{{ item.birthday }}</text>
                <text>{{ item.height }}</text>
                <text class="space-box">{{ item.weight }}</text>
                <text>{{ item.bodyTypeText }}</text>
              </view>
              <view>
                <text>内地身份证号：</text>
                <text>{{ item.idNo }}</text>
              </view>
            </view>
            <view class="edit-icon" @tap.stop="handleEdit(item)">
              <image :src="editIcon" mode="aspectFit" />
            </view>
          </view>
        </view>
        <view
          v-else-if="dataList.length === 0 && isRequest"
          class="flex-box center-box fill-height"
        >
          <uv-empty mode="data"></uv-empty>
        </view>
      </scroll-view>
    </view>
    <view class="flex-box operate-box" v-if="dataList.length">
      <view class="delete-box" @tap.stop="handleDelete">删除营员</view>
      <view class="add-box" @tap.stop="handleAdd">新增营员</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import editIcon from "@/asstes/images/mine/editIcon.png";
import noData from "@/asstes/images/myCamper/noData.png";
import MyCamperApi from "@/api/camper/api.ts";
import { onShow } from "@dcloudio/uni-app";
// 基础数据
const dataList = ref([]);
const isRequest = ref(false);
/**
 * @description 选择
 * @param {Object} item
 */
function handleSelect(item) {
  item.isSelect = !item.isSelect;
}
/**
 * @description 删除营员
 */
function handleDelete() {
  const camperIds = [];
  dataList.value.forEach((item) => {
    if (item.isSelect) {
      camperIds.push(item.id);
    }
  });
  if (camperIds.length === 0) {
    uni.showToast({
      title: "请选择要删除的营员",
      icon: "none",
      duration: 2000,
    });
    return;
  }
  MyCamperApi.delCamper(camperIds).then((res) => {
    if (res.code === "00000") {
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
      getDataList();
    }
  });
}
/**
 * @description 新增营员
 */
function handleAdd() {
  uni.navigateTo({
    url: "./addCamper",
  });
}
/**
 * @description 编辑
 * @param {Object} item
 */
function handleEdit(item) {
  uni.navigateTo({
    url: `./addCamper?item=${JSON.stringify(item)}`,
  });
}
/**
 * @description 获取数据
 */
function getDataList() {
  MyCamperApi.getCamperList()
    .then((res) => {
      isRequest.value = true;
      dataList.value = res.data;
    })
    .catch((err) => {
      isRequest.value = true;
    });
}
onMounted(() => {
  getDataList();
});
onShow(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.myCamper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .head-box {
    background: rgba(67, 207, 124, 0.21);
    padding: 10rpx 34rpx;
    font-size: 26rpx;
    color: rgba(67, 207, 124, 1);
  }

  .container-box {
    margin: 40rpx 22rpx;
    overflow: hidden;
  }

  .operate-box {
    justify-content: space-around;
    background: #fff;
    padding: 30rpx 0;
  }

  .delete-box {
    border-radius: 10rpx;
    background: rgba(128, 128, 128, 1);
    font-size: 34rpx;
    color: #fff;
    padding: 22rpx 42rpx;
  }

  .add-box {
    border-radius: 10rpx;
    background: rgba(67, 207, 124, 1);
    font-size: 34rpx;
    color: #fff;
    padding: 22rpx 42rpx;
  }

  .item-box {
    border-radius: 10rpx;
    padding: 20rpx 40rpx;
    font-size: 24rpx;
    color: rgba(128, 128, 128, 1);
  }

  .name {
    color: #000;
    font-size: 28rpx;
    margin-right: 20rpx;
  }

  .space-box {
    margin: 0 10rpx;
  }

  .select-box {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 1rpx solid #000;
    margin-right: 20rpx;
    color: #fff;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 32rpx;
  }

  .select-active {
    background: rgba(67, 207, 124, 1);
    border-color: rgba(67, 207, 124, 1);
  }

  .space-top {
    margin: 10rpx 0;
  }

  .edit-icon {
    width: 40rpx;
    height: 40rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .space-vertical-box {
    margin-bottom: 40rpx;
  }
  .center-box {
    justify-content: center;
  }

  .nodata {
    width: 346rpx;
    height: 336rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .fill-height {
    height: 100%;
  }
}
</style>
